﻿/*
 * Stepper Plugin [Formstone Library]
 * @author Ben Plum
 * @version 0.1.3
 *
 * Copyright Â© 2012 Ben Plum <mr@benplum.com>
 * Released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
 */
  
/* Set border and padding values moved inward */
input.stepper-input {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Stepper */

.stepper {
    height: 30px;
    margin: 0 0 10px 0;
    overflow: hidden;
    position: relative;
    width: 50px;
}

.stepper .stepper-input {
    background: #FFF;
    border: 1px solid #CCC;
    color: #000;
    height: 30px;
    margin: 0;
    overflow: hidden;
    padding: 1px 0 1px 5px;
    width: 100%;
    z-index: 49;
}

.stepper:hover .stepper-input, .stepper .stepper-input:focus { background-color: #F9F9F9; }

.stepper .stepper-step {
    background: #EEE url(/images/stepper.png) no-repeat;
    border: 1px solid #CCC;
    cursor: pointer;
    display: block;
    height: 50%;
    position: absolute;
    right: 0;
    text-indent: -99999px;
    width: 20px;
    z-index: 50;
}

.stepper .stepper-step:hover { background-color: #F9F9F9; }

/* Up and Down arrows */

.stepper .stepper-step.up {
    background-position: center top;
    border-bottom: none;
    top: 0;
}

.stepper .stepper-step.down {
    background-position: center bottom;
    bottom: 0;
}

/* Disabled */

.stepper.disabled .stepper-input {
    background: #FFF;
    border: 1px solid #EEE;
    color: #CCC;
}

.stepper.disabled .stepper-step, .stepper.disabled .stepper-step:hover {
    background: #F9F9F9;
    border: 1px solid #EEE;
    cursor: default;
}

.stepper.disabled .stepper-step.up {
    background: #F9F9F9 url(/images/stepper.png) no-repeat;
    background-position: center top;
    border-bottom: none;
    top: 0;
}

.stepper.disabled .stepper-step.down {
    background: #F9F9F9 url(/images/stepper.png) no-repeat;
    background-position: center bottom;
    bottom: 0;
}